import React from 'react';
import '../../style.less';
import './anas.less';
import { Link } from 'react-router';
import {Spin} from 'antd';
import {Circle} from 'rc-progress';
import superagent from 'superagent';
import echarts from 'echarts';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/theme/dark';
import Draggable from 'react-draggable';

function newline(option, number, axis) {
    option[axis]['axisLabel'] = {
        interval: 0,
        formatter: function (params) {
            var newParamsName = "";
            var paramsNameNumber = params.length;
            var provideNumber = number;
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
            if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                        tempStr = params.substring(start, paramsNameNumber);
                    } else {
                        tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                }
            } else {
                newParamsName = params;
            }
            return newParamsName
        }
    }
    return option;
}

function max(prev, next) {
    return Math.max(prev, next);
}

function min(prev, next) {
    return Math.min(prev, next);
}


let titleStyle = {
    color: '#00e4ff',
    fontSize: 16
};

let allData;
let chartWaterChart0,//断面水位1
    chartWaterChart1,//断面水位2
    chartWaterChart2,//断面水位3
    chartWaterChart3,//断面水位4
    chartRiverChart0,//长江水位1
    chartRiverChart1,//长江水位2
    chartRiverChart2,//长江水位3
    chartRiverChart3;//长江水位4

let floodColor = ["#ff6535", "#ffaa05", "#447da1", "#424d73"];

function getData(obj) {
    let getAllPos = JSON.parse(localStorage.getItem('allPos5'))

    for (let pos in getAllPos) {
        if (getAllPos[pos].left) {
            document.getElementById(pos).style.left = getAllPos[pos].left + "px";
            document.getElementById(pos).style.top = getAllPos[pos].top + "px";
        }
    }
    superagent
        .get(window.httpAddress+':8080/stdata/getHistoryData/2017-06-9 11:00:00/2017-06-11 11:00:00')
        .end(function (err, res) {
            obj.setState({loading: false, ana: JSON.parse(res.text)})
            allData = JSON.parse(res.text);

            //断面水位1
            chartWaterChart0 = echarts.init(document.getElementById('chartWater0'), 'dark');
            chartWaterChart1 = echarts.init(document.getElementById('chartWater1'), 'dark');
            chartWaterChart2 = echarts.init(document.getElementById('chartWater2'), 'dark');
            chartWaterChart3 = echarts.init(document.getElementById('chartWater3'), 'dark');

            let waterDatax = [],waterDatax1 = [],waterDatax2 = [], waterDatax3= [], waterLegend = [], waterSeries = [], waterSeries0 = [], allWaterData = [],
                waterSeries1 = [], waterSeries2 = [], waterSeries3 = []

            for (let i in allData.center) {
                waterLegend.push(i)
                let waterSeriesNow0 = []
                for (let x in allData.center[i]) {
                    waterSeriesNow0.push(allData.center[i][x].zDatasH)
                    waterSeries.push(allData.center[i][x].zDatasH)
                }
                let wateraa0 = []

                for (let z in waterSeriesNow0[0]) {
                    wateraa0.push(waterSeriesNow0[0][z])
                }


                //
                let wateraa1 = []

                for (let z1 in waterSeriesNow0[1]) {
                    wateraa1.push(waterSeriesNow0[1][z1])
                }


                //
                let wateraa2 = []

                for (let z2 in waterSeriesNow0[2]) {
                    wateraa2.push(waterSeriesNow0[2][z2])
                }


                //

                let wateraa3 = []

                for (let z3 in waterSeriesNow0[3]) {
                    wateraa3.push(waterSeriesNow0[3][z3])
                }



                if(i == "东山"){

                    waterSeries0.push(
                        {
                            name: i,
                            type: "line",
                            data: wateraa0,
                            itemStyle: {
                                normal: {
                                    color: '#ffff00'
                                }
                            }
                        }
                    )


                    waterSeries1.push(
                        {
                            name: i,
                            type: "line",
                            data: wateraa1,
                            itemStyle: {
                                normal: {
                                    color: '#ffff00'
                                }
                            }
                        }
                    )

                    waterSeries2.push(
                        {
                            name: i,
                            type: "line",
                            data: wateraa2,
                            itemStyle: {
                                normal: {
                                    color: '#ffff00'
                                }
                            }
                        }
                    )

                    waterSeries3.push(
                        {
                            name: i,
                            type: "line",
                            data: wateraa3,
                            itemStyle: {
                                normal: {
                                    color: '#ffff00'
                                }
                            }
                        }
                    )


                }else{
                    waterSeries0.push(
                        {
                            name: i,
                            type: "line",
                            data: wateraa0
                        }
                    )

                    waterSeries1.push(
                        {
                            name: i,
                            type: "line",
                            data: wateraa1
                        }
                    )

                    waterSeries2.push(
                        {
                            name: i,
                            type: "line",
                            data: wateraa2
                        }
                    )

                    waterSeries3.push(
                        {
                            name: i,
                            type: "line",
                            data: wateraa3
                        }
                    )

                }


            }

            for (let y in waterSeries[0]) {
                waterDatax.push(y.replace(/:00:00/, ""))
                allWaterData.push(waterSeries[0][y])
            }

            for(let y in waterSeries[1]){
                waterDatax1.push(y.replace(/:00:00/, ""))
            }

            for(let y in waterSeries[2]){
                waterDatax2.push(y.replace(/:00:00/, ""))
            }

            for(let y in waterSeries[3]){
                waterDatax3.push(y.replace(/:00:00/, ""))
            }


            let chartWaterChart0Option = {
                backgroundColor: "transparent",
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                legend: {
                    bottom: '0',
                    data: waterLegend
                },
                yAxis: [
                    {
                        type: 'value',
                        name: 'mm',
                        min: (allWaterData.reduce(min) * .9).toFixed(1),
                    }
                ],
                xAxis: {
                    data: waterDatax
                },
                series: waterSeries0
            }

            chartWaterChart0.setOption(chartWaterChart0Option);


            //断面水位2

            let chartWaterChart1Option = {
                backgroundColor: "transparent",
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                legend: {
                    bottom: '0',
                    data: waterLegend
                },
                yAxis: [
                    {
                        type: 'value',
                        name: 'mm',
                        min: (allWaterData.reduce(min) * .9).toFixed(1),
                    }
                ],
                xAxis: {
                    data: waterDatax1
                },
                series: waterSeries1
            }
            chartWaterChart1.setOption(chartWaterChart1Option);

            //断面水位2

            let chartWaterChart2Option = {
                backgroundColor: "transparent",
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                legend: {
                    bottom: '0',
                    data: waterLegend
                },
                yAxis: [
                    {
                        type: 'value',
                        name: 'mm',
                        min: (allWaterData.reduce(min) * .9).toFixed(1),
                    }
                ],
                xAxis: {
                    data: waterDatax2
                },
                series: waterSeries2
            }
            chartWaterChart2.setOption(chartWaterChart2Option);


            //断面水位3
            let chartWaterChart3Option = {
                backgroundColor: "transparent",
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                legend: {
                    bottom: '0',
                    data: waterLegend
                },
                yAxis: [
                    {
                        type: 'value',
                        name: 'mm',
                        min: (allWaterData.reduce(min) * .9).toFixed(1),
                    }
                ],
                xAxis: {
                    data: waterDatax3
                },
                series: waterSeries3
            }
            chartWaterChart3.setOption(chartWaterChart3Option);


            //长江流量
            chartRiverChart0 = echarts.init(document.getElementById('chartRiver0'), 'dark');
            chartRiverChart1 = echarts.init(document.getElementById('chartRiver1'), 'dark');
            chartRiverChart2 = echarts.init(document.getElementById('chartRiver2'), 'dark');
            chartRiverChart3 = echarts.init(document.getElementById('chartRiver3'), 'dark');


            let levelDatax = [],levelDatax1=[],levelDatax2= [],levelDatax3 = [], dtzs0 = [], dtqs0 = [], xgs0 = [], dtzs1 = [], dtqs1 = [], xgs1 = [], dtzs2 = [],
                dtqs2 = [], xgs2 = [], dtzs3 = [], dtqs3 = [], xgs3 = [];


            //0
            for (let ii in allData.right[0].DTZs) {
                for (let ii1 in allData.right[0].DTZs[ii]) {
                    levelDatax.push(ii1.replace(/:00:00/, ""))
                    dtzs0.push(allData.right[0].DTZs[ii][ii1])
                }
            }


            for (let ii in allData.right[0].DTQs) {
                for (let ii1 in allData.right[0].DTQs[ii]) {
                    dtqs0.push(allData.right[0].DTQs[ii][ii1] / 10000)
                }
            }

            for (let ii in allData.right[0].XGs) {
                for (let ii1 in allData.right[0].XGs[ii]) {
                    xgs0.push(allData.right[0].XGs[ii][ii1])
                }
            }

            //1
            for (let ii in allData.right[1].DTZs) {
                for (let ii1 in allData.right[1].DTZs[ii]) {
                    levelDatax1.push(ii1.replace(/:00:00/, ""))
                    dtzs1.push(allData.right[1].DTZs[ii][ii1])
                }
            }

            for (let ii in allData.right[1].DTQs) {
                for (let ii1 in allData.right[1].DTQs[ii]) {
                    dtqs1.push(allData.right[1].DTQs[ii][ii1] / 10000)
                }
            }

            for (let ii in allData.right[1].XGs) {
                for (let ii1 in allData.right[1].XGs[ii]) {
                    xgs1.push(allData.right[1].XGs[ii][ii1])
                }
            }

            //2
            for (let ii in allData.right[2].DTZs) {
                for (let ii1 in allData.right[2].DTZs[ii]) {
                    levelDatax2.push(ii1.replace(/:00:00/, ""))
                    dtzs2.push(allData.right[2].DTZs[ii][ii1])
                }
            }

            for (let ii in allData.right[2].DTQs) {
                for (let ii1 in allData.right[2].DTQs[ii]) {
                    dtqs2.push(allData.right[2].DTQs[ii][ii1] / 10000)
                }
            }

            for (let ii in allData.right[2].XGs) {
                for (let ii1 in allData.right[2].XGs[ii]) {
                    xgs2.push(allData.right[2].XGs[ii][ii1])
                }
            }

            //3
            for (let ii in allData.right[3].DTZs) {
                for (let ii1 in allData.right[3].DTZs[ii]) {
                    levelDatax3.push(ii1.replace(/:00:00/, ""))
                    dtzs3.push(allData.right[3].DTZs[ii][ii1])
                }
            }

            for (let ii in allData.right[3].DTQs) {
                for (let ii1 in allData.right[3].DTQs[ii]) {
                    dtqs3.push(allData.right[3].DTQs[ii][ii1] / 10000)
                }
            }

            for (let ii in allData.right[2].XGs) {
                for (let ii1 in allData.right[3].XGs[ii]) {
                    xgs3.push(allData.right[3].XGs[ii][ii1])
                }
            }


            //0
            let chartRiverChart0Option = {
                backgroundColor: "transparent",
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                legend: {
                    bottom: '0',
                    data: ['大通水位', '大通流量', '下关潮位']
                },
                yAxis: [
                    {
                        type: 'value',
                        name: 'm',
                        min: (dtzs0.concat(xgs0).reduce(min) * .9).toFixed(1),
                    },
                    // {
                    //     type: 'value',
                    //     name: '万m³/s',
                    //     min: (dtqs0.reduce(min) * .9).toFixed(1)
                    //
                    // }
                ],
                xAxis: {
                    data: levelDatax
                },
                series: [
                    // {
                    //     name: "大通水位",
                    //     type: "line",
                    //     data: dtzs0
                    // },
                    // {
                    //     name: "大通流量",
                    //     type: "line",
                    //     yAxisIndex: 1,
                    //     data: dtqs0,
                    //     itemStyle: {
                    //         normal: {
                    //             color: '#ffff00'
                    //         }
                    //     }
                    // },
                    {
                        name: "下关潮位",
                        type: "line",
                        data: xgs0,
                        itemStyle: {
                            normal: {
                                color: '#00c000'
                            }
                        }
                    }
                ]
            }

            chartRiverChart0.setOption(chartRiverChart0Option);


            //1

            let chartRiverChart1Option = {
                backgroundColor: "transparent",
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                legend: {
                    bottom: '0',
                    data: ['下关潮位']
                },
                yAxis: [
                    {
                        type: 'value',
                        name: 'm',
                        min: (dtzs1.concat(xgs1).reduce(min) * .9).toFixed(1),
                    },
                    // {
                    //     type: 'value',
                    //     name: '万m³/s',
                    //     min: (dtqs1.reduce(min) * .9).toFixed(1)
                    //
                    // }
                ],
                xAxis: {
                    data: levelDatax1
                },
                series: [
                    // {
                    //     name: "大通水位",
                    //     type: "line",
                    //     data: dtzs1
                    // },
                    // {
                    //     name: "大通流量",
                    //     type: "line",
                    //     yAxisIndex: 1,
                    //     data: dtqs1,
                    //     itemStyle: {
                    //         normal: {
                    //             color: '#ffff00'
                    //         }
                    //     }
                    // },
                    {
                        name: "下关潮位",
                        type: "line",
                        data: xgs1,
                        itemStyle: {
                            normal: {
                                color: '#00c000'
                            }
                        }
                    }
                ]
            }

            chartRiverChart1.setOption(chartRiverChart1Option);



            //2

            let chartRiverChart2Option = {
                backgroundColor: "transparent",
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                legend: {
                    bottom: '0',
                    data: ['下关潮位']
                },
                yAxis: [
                    {
                        type: 'value',
                        name: 'm',
                        min: (dtzs2.concat(xgs2).reduce(min) * .9).toFixed(1),
                    },
                    // {
                    //     type: 'value',
                    //     name: '万m³/s',
                    //     min: (dtqs2.reduce(min) * .9).toFixed(1)
                    //
                    // }
                ],
                xAxis: {
                    data: levelDatax2
                },
                series: [
                    // {
                    //     name: "大通水位",
                    //     type: "line",
                    //     data: dtzs2
                    // },
                    // {
                    //     name: "大通流量",
                    //     type: "line",
                    //     yAxisIndex: 1,
                    //     data: dtqs2,
                    //     itemStyle: {
                    //         normal: {
                    //             color: '#ffff00'
                    //         }
                    //     }
                    // },
                    {
                        name: "下关潮位",
                        type: "line",
                        data: xgs2,
                        itemStyle: {
                            normal: {
                                color: '#00c000'
                            }
                        }
                    }
                ]
            }

            chartRiverChart2.setOption(chartRiverChart2Option);


            //3

            let chartRiverChart3Option = {
                backgroundColor: "transparent",
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                legend: {
                    bottom: '0',
                    data: [ '下关潮位']
                },
                yAxis: [
                    {
                        type: 'value',
                        name: 'm',
                        min: (dtzs3.concat(xgs3).reduce(min) * .9).toFixed(1),
                    },
                    // {
                    //     type: 'value',
                    //     name: '万m³/s',
                    //     min: (dtqs3.reduce(min) * .9).toFixed(1)
                    //
                    // }
                ],
                xAxis: {
                    data: levelDatax3
                },
                series: [
                    // {
                    //     name: "大通水位",
                    //     type: "line",
                    //     data: dtzs3
                    // },
                    // {
                    //     name: "大通流量",
                    //     type: "line",
                    //     yAxisIndex: 1,
                    //     data: dtqs3,
                    //     itemStyle: {
                    //         normal: {
                    //             color: '#ffff00'
                    //         }
                    //     }
                    // },
                    {
                        name: "下关潮位",
                        type: "line",
                        data: xgs3,
                        itemStyle: {
                            normal: {
                                color: '#00c000'
                            }
                        }
                    }
                ]
            }

            chartRiverChart3.setOption(chartRiverChart3Option);


        })


}


let allPos5 = {
    totalWrap: {},
    mainWrap: {},
    mapArea: {},
    waterLevelWrap: {},
    waterChannelWrap: {},
    pumpWrap: {},
    emergencyWrap: {},
    dangerWrap: {},
    reservoirWrap: {}
};

localStorage.removeItem('allPos5')
if (localStorage.getItem('allPos5')) {

} else {
    localStorage.setItem('allPos5', JSON.stringify(allPos5))
}

//left
class Rain extends React.Component {
    constructor(props) {
        super(props);
    }

    componentWillReceiveProps(nextProps) {

    }

    shouldComponentUpdate(nextProps) {
        return Object.keys(nextProps.info).length
    }

    render() {
        let leftPart = [];
        if(Object.keys(this.props.info).length) {
            for (let i in this.props.info.left) {
                let aa;
                i == 0 ? aa = <div className="subTitle">当前洪水</div> : aa =
                    <div className="subTitle">相似洪水 <span className="anaRank">NO.{i}</span></div>;

                let leftThird = `leftThird leftThird${i}`, leftCenter = `fl leftCenter leftCenter${i}`,
                    leftCircle = `progress-radial progress-radial${i}`;
                let imgChoose = JSON.parse(this.props.info.dzmData[i].result);
                let startTime = this.props.info.left[i].start_time.replace(/:00:00/, "");
                let endTime = this.props.info.left[i].end_time.replace(/:00:00/, "");
                let rainArray = this.props.info.left[i].rainData.toFixed(1).toString().split("");
                let rainSpan = []
                for (let x in rainArray) {
                    rainSpan.push(
                        <span style={{background: floodColor[i]}} key={x}>{rainArray[x]}</span>
                    )
                }
                if (i == 0) {
                    leftPart.push(
                        <div className="leftPart" key={i}>
                            {aa}
                            <div className="clearfix leftMain">
                                <div className="fl leftOne">
                                    <div className="topPercentTitle">
                                        降雨量
                                    </div>
                                    <div className="rainData">
                                        {rainSpan}mm
                                    </div>
                                    <div className="rainDate">
                                        {startTime}时 --<br/> {endTime}时
                                    </div>

                                </div>
                                <div className={leftCenter}>
                                    <img src={imgChoose.imgurl ? imgChoose.imgurl.replace(/http:\/\/10.32.224.49/,window.httpAddress) : imgChoose.bg.replace(/http:\/\/10.32.224.49/,window.httpAddress)} alt=""/>
                                </div>
                            </div>
                        </div>
                    )
                } else {
                    if(i == 1){
                        leftPart.push(
                            <div className="leftPart" key={i}>
                                {aa}
                                <div className="clearfix leftMain">
                                    <div className="fl leftOne">
                                        <div className="rainData">
                                            {rainSpan}mm
                                        </div>
                                        <div className="rainDate">
                                            {startTime}时 --<br/> {endTime}时
                                        </div>

                                    </div>
                                    <div className={leftCenter}>
                                        <img src={imgChoose.imgurl ? imgChoose.imgurl.replace(/http:\/\/10.32.224.49/,window.httpAddress) : imgChoose.bg.replace(/http:\/\/10.32.224.49/,window.httpAddress)} alt=""/>
                                    </div>
                                    <div className={leftThird}>
                                        <div className="circleInfo">
                                            {(this.props.info.left[i].similarRate * 100).toFixed(2)}%
                                        </div>
                                        <Circle percent={this.props.info.left[i].similarRate * 100} strokeWidth="10"
                                                trailWidth="10" strokeColor={floodColor[i]} trailColor="#0f2e5a"/>
                                        <div className="percentTitle percentTitleRight">
                                            相似度
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    }else{
                        leftPart.push(
                            <div className="leftPart" key={i}>
                                {aa}
                                <div className="clearfix leftMain">
                                    <div className="fl leftOne">
                                        <div className="rainData">
                                            {rainSpan}mm
                                        </div>
                                        <div className="rainDate">
                                            {startTime}时 --<br/> {endTime}时
                                        </div>
                                    </div>
                                    <div className={leftCenter}>
                                        <img src={imgChoose.imgurl ? imgChoose.imgurl.replace(/http:\/\/10.32.224.49/,window.httpAddress) : imgChoose.bg.replace(/http:\/\/10.32.224.49/,window.httpAddress)} alt=""/>
                                    </div>
                                    <div className={leftThird}>
                                        <div className="circleInfo">
                                            {(this.props.info.left[i].similarRate * 100).toFixed(2)}%
                                        </div>
                                        <Circle percent={this.props.info.left[i].similarRate * 100} strokeWidth="10"
                                                trailWidth="10" strokeColor={floodColor[i]} trailColor="#0f2e5a"/>

                                    </div>
                                </div>
                            </div>
                        )
                    }

                }


            }
        }
        return (
            <div className="anaFlood">
                <div className="selfTitle">
                    相似降雨分析
                </div>
                {leftPart}
            </div>
        )
    }
}


//all
class Level extends React.Component {
    constructor(props) {
        super(props);
    }

    componentWillReceiveProps(nextProps) {

    }

    shouldComponentUpdate(nextProps) {
        return Object.keys(nextProps.info).length
    }

    render() {
        let totalLevel = [], x = 0;
        if (Object.keys(this.props.info).length) {
            for (let i in this.props.info.allSimilarRate) {
                let startTime = i.split('_')[0].replace(/:00:00/, "");
                let endTime = i.split('_')[1].replace(/:00:00/, "");
                x++;
                totalLevel.push(
                    <Link className="waterSingle" key={i} to={"/hiss?tm1=" + startTime + "&tm2=" + endTime}>
                        <div className="subTitle">相似洪水 <span className="anaRank">NO.{x}</span></div>
                        <div className="circleWrap">
                            <div className="circleInfo">
                                {(this.props.info.allSimilarRate[i] * 100).toFixed(2)}%
                            </div>
                            <Circle percent={this.props.info.allSimilarRate[i] * 100} strokeWidth="10"
                                    trailWidth="10" strokeColor={floodColor[x]} trailColor="#0f2e5a"/>

                        </div>
                    </Link>
                )
            }
        }
        return (
            <div className="anaWater anaLevelInside">
                <div className="waterSingle anaLevelTop">
                    综合降雨量、重要控制断面水位及长江水位流量等
                    不同维度信息，计算得洪水综合相似度结果。
                </div>
                {totalLevel}
            </div>
        )
    }
}


class Ana extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            ana: {},
            allPos: allPos5
        };

    }

    componentDidMount = () => {
        getData(this);
        try {
            this.setState({
                allPos: JSON.parse(localStorage.getItem('allPos5'))
            })
        } catch (err) {

        }


    }


    handleStop = (e, data) => {
        let target = document.getElementById(data.node.id);
        let changePos = JSON.parse(localStorage.getItem('allPos5'))
        for (let ii in changePos) {
            if (ii == data.node.id) {
                changePos[ii] = {}
                changePos[ii].left = target.offsetLeft + data.x;
                changePos[ii].top = target.offsetTop + data.y;
            }
        }
        localStorage.setItem('allPos5', JSON.stringify(changePos));

    }

    render() {
        let singleWrap = [], singlePercent = [];
        let waterWrap = [], waterPercent = [];
        if (Object.keys(this.state.ana).length) {
            //断面
            for (let x in this.state.ana.centerSimilarRate) {
                singlePercent.push(this.state.ana.centerSimilarRate[x])
            }
            for (let z in this.state.ana.right) {
                if (z > 0) {
                    waterPercent.push(this.state.ana.right[z].AvgSimilarRate)
                }
            }
            for (let i = 0; i < 3; i++) {

                //断面
                let idWrap = "chartWater" + (i + 1)

                if(i == 0){
                    singleWrap.push(
                        <div className="waterSingle" key={idWrap}>
                            <div className="subTitle">相似洪水 <span className="anaRank">NO.{i + 1}</span></div>
                            <div id={idWrap} className="chartWater chartWaterS"></div>
                            <div className="rightCircle">
                                <div className="circleInfo">
                                    {(singlePercent[i] * 100).toFixed(2)}%
                                </div>
                                <Circle percent={singlePercent[i] * 100} strokeWidth="10" trailWidth="10"
                                        strokeColor={floodColor[i + 1]} trailColor="#0f2e5a"/>
                                <div className="percentTitle percentTitleRight">
                                    相似度
                                </div>
                            </div>
                        </div>
                    )
                }else{
                    singleWrap.push(
                        <div className="waterSingle" key={idWrap}>
                            <div className="subTitle">相似洪水 <span className="anaRank">NO.{i + 1}</span></div>
                            <div id={idWrap} className="chartWater chartWaterS"></div>
                            <div className="rightCircle">
                                <div className="circleInfo">
                                    {(singlePercent[i] * 100).toFixed(2)}%
                                </div>
                                <Circle percent={singlePercent[i] * 100} strokeWidth="10" trailWidth="10"
                                        strokeColor={floodColor[i + 1]} trailColor="#0f2e5a"/>

                            </div>
                        </div>
                    )
                }


                //长江

                let waterId = "chartRiver" + (i + 1)
                if(i === 0){
                    waterWrap.push(
                        <div className="waterSingle" key={waterId}>
                            <div className="subTitle">相似洪水 <span className="anaRank">NO.{i + 1}</span></div>
                            <div id={waterId} className="chartWater chartLevel chartLevelS"></div>
                            <div className="rightCircle">
                                <div className="circleInfo">
                                    {(waterPercent[i] * 100).toFixed(2)}%
                                </div>
                                <Circle percent={waterPercent[i] * 100} strokeWidth="10" trailWidth="10"
                                        strokeColor={floodColor[i + 1]} trailColor="#0f2e5a"/>
                                <div className="percentTitle percentTitleRight">
                                    相似度
                                </div>
                            </div>
                        </div>
                    )
                }else{
                    waterWrap.push(
                        <div className="waterSingle" key={waterId}>
                            <div className="subTitle">相似洪水 <span className="anaRank">NO.{i + 1}</span></div>
                            <div id={waterId} className="chartWater chartLevel chartLevelS"></div>
                            <div className="rightCircle">
                                <div className="circleInfo">
                                    {(waterPercent[i] * 100).toFixed(2)}%
                                </div>
                                <Circle percent={waterPercent[i] * 100} strokeWidth="10" trailWidth="10"
                                        strokeColor={floodColor[i + 1]} trailColor="#0f2e5a"/>
                            </div>
                        </div>
                    )
                }

            }


        }

        return (
            <Spin spinning={this.state.loading} tip="加载中...">
                <div className="mainWrap">
                    <div className="pageTitle">
                        秦淮河相似水情分析(2017-06-9 11时--2017-06-11 11时)
                    </div>
                    <a className="getBack" href="/qhh">返回</a>
                    <div className="pageHome">
                        {/*左*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="graphic anaLeft" id="anaLeft">
                                <Rain info={this.state.ana}/>
                                <div className="graphicRight"></div>
                                <div className="graphicLeft"></div>
                            </div>
                        </Draggable>
                        {/*中*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="graphic anaCenter" id="anaCenter">
                                <div className="anaWater">
                                    <div className="selfTitle">
                                        主要断面水位
                                    </div>
                                    <div className="waterSingle">
                                        <div className="subTitle">当前洪水</div>
                                        <div id="chartWater0" className="chartWater"></div>
                                    </div>
                                    {singleWrap}

                                </div>
                                <div className="graphicRight"></div>
                                <div className="graphicLeft"></div>
                            </div>
                        </Draggable>
                        {/*右*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="graphic anaRight" id="anaRight">
                                <div className="anaLevel">
                                    <div className="selfTitle">
                                        长江水位流量
                                    </div>
                                    <div className="waterSingle">
                                        <div className="subTitle">当前洪水</div>
                                        <div id="chartRiver0" className="chartWater"></div>
                                    </div>
                                    {waterWrap}
                                </div>
                                <div className="graphicRight"></div>
                                <div className="graphicLeft"></div>
                            </div>
                        </Draggable>
                        {/*综合相似度*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="graphic allPercent" id="allPercent">
                                <div className="anaLevel">
                                    <div className="selfTitle">
                                        综合相似度
                                    </div>
                                    <Level info={this.state.ana} />

                                </div>
                                <div className="graphicRight"></div>
                                <div className="graphicLeft"></div>
                            </div>
                        </Draggable>
                    </div>
                </div>
            </Spin>
        )
    }
}

export default Ana;
